<template>
<div>
  <el-row>
    <el-col :span="2" style="line-height: 40px">类型查询:</el-col>
    <el-col :span="4">
      <el-select v-model="selectForm.truckType" placeholder="请选择" @change="selectTruck">
        <el-option label="全部" value=null></el-option>
        <el-option label="短途货车" value= "短途货车"></el-option>
        <el-option label="长途货车" value= "长途货车"></el-option>
      </el-select>
    </el-col>
    <el-col :span="2" style="line-height: 40px" :offset="1">状态查询:</el-col>
    <el-col :span="4">
      <el-select v-model="selectForm.truckState" placeholder="请选择" @change="selectTruck">
        <el-option label="全部" value=null></el-option>
        <el-option label="空闲" value= "空闲"></el-option>
        <el-option label="待命" value= "待命"></el-option>
        <el-option label="待装车" value= "待装车"></el-option>
        <el-option label="中转中" value= "中转中"></el-option>
        <el-option label="配送中" value= "配送中"></el-option>
        <el-option label="维修中" value= "维修中"></el-option>
      </el-select>
    </el-col>
    <el-col :span="2" style="line-height: 40px" :offset="1">当前所在站点:</el-col>
    <el-col :span="4">
      <el-select v-model="selectForm.nowSite" placeholder="请选择" @change="selectTruck">
        <el-option label="全部" value=null></el-option>
        <el-option label="本站点" :value="this.$store.state.modules.loginAccount.account.sitetb.siteName"></el-option>
      </el-select>
    </el-col>
  </el-row>
  <el-table
    :data="allTruck"
    height="500"
    border
    @row-dblclick="viewDetails"
    style="width: 100%">
    <el-table-column prop="truckId" label="车辆编号"></el-table-column>
    <el-table-column prop="empName" label="司机"></el-table-column>
    <el-table-column prop="truckType" label="车辆类型"></el-table-column>
    <el-table-column prop="truckNumber" label="车牌号"></el-table-column>
    <el-table-column prop="truckState" label="车辆状态"></el-table-column>
    <el-table-column prop="stateInfo" label="状态信息"></el-table-column>
    <el-table-column prop="nowSite" label="当前所在站点"></el-table-column>
    <el-table-column prop="endSite" label="目标站点"></el-table-column>
  </el-table>
  <el-dialog title="司机绑定" :visible.sync="dialogFormVisible">
    <el-row>
      <el-col :span="2" class="height40">
        车辆编号:
      </el-col>
      <el-col :span="10">
        <el-input v-model="truckForm.truckId" disabled></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2" class="height40">
        车牌号:
      </el-col>
      <el-col :span="10">
        <el-input v-model="truckForm.truckNumber" disabled></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2" class="height40">
        车辆类型:
      </el-col>
      <el-col :span="10">
        <el-input v-model="truckForm.truckType" disabled></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="2" class="height40">
        司机绑定:
      </el-col>
      <el-col :span="10">
        <el-select v-model="truckForm.empId" @change="empUpdate">
          <el-option label="取消绑定" value=null></el-option>
          <el-option
            v-for="driver in drivers"
            :key="driver.empId"
            :label="driver.empName"
            :value="driver.empId">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
  </el-dialog>
</div>
</template>

<script>
import {getTruck,updTruck} from 'network/truck.js'
import {selEmp,updEmp} from 'network/employee'

let loginAccount = JSON.parse(sessionStorage.loginAccount)
//获取所有货车
let selTrucks = function(allTruck) {
  getTruck({siteId:loginAccount.siteId}).then( res => {
    allTruck.splice(0)
    for(let truck of res) {
      if(truck.empId != null && truck.empId != 0) {
        truck.empName = truck.emps.empName
      }else{
        truck.empName = null
      }
      allTruck.push(truck)
    }
  }).catch(err => {
    console.log(err)
  })
}
//获取所有空闲司机
let selEmps = function(drivers) {
  selEmp({siteId: loginAccount.siteId , postId: 7}).then(res => {
    drivers.splice(0)
    for(let emp of res) {
      if(emp.truckId == 0 || emp.truckId == null) {
        drivers.push(emp)
      }
    }
  }).catch(err => {
    console.log(err)
  })
}
let truckEmpId

export default {
  data() {
    return {
      dialogFormVisible: false,
      drivers: [],
      allTruck: [],
      truckForm: {
        truckId: '',
        truckType: '',
        empId: '',
        empName: '',
        truckNumber: '',
        truckState: ''
      },
      selectForm: {
        truckType: '',
        truckState: '',
        nowSite: ''
      }
    }
  },
  methods: {
    //打开绑定界面时添加表格数据到绑定界面
    viewDetails(row) {
      this.dialogFormVisible = true
      this.truckForm.truckId = row.truckId
      this.truckForm.truckType = row.truckType
      this.truckForm.empId = row.empId
      this.truckForm.empName = row.empName
      this.truckForm.truckNumber = row.truckNumber
      this.truckForm.truckState = row.truckState
      truckEmpId = row.empId
    },
    //修改货车所绑定司机
    empUpdate(empId) {
      if(this.truckForm.truckState != "待命" && this.truckForm.truckState != "空闲") {
        this.$message({
          showClose: true,
          message: '该车辆暂时无法修改绑定司机',
          type: 'error'
        });
        return false
      }
      let flag = confirm("绑定该司机?");
      let at = this.allTruck
      let ds = this.drivers
      if(flag){
        this.dialogFormVisible = false
        if(empId != "null" && empId != null) {
          updTruck({truckId:this.truckForm.truckId,truckState:"待命",empId:this.truckForm.empId}).then(res =>{
            if(res != 1) {
              this.$message({
                showClose: true,
                message: '修改失败',
                type: 'error'
              });
              return false;
            }
            //取消货车绑定的旧员工
            updEmp({truckId:0,empId:truckEmpId}).then().catch()
            //绑定新员工
            updEmp({truckId:this.truckForm.truckId,empId:this.truckForm.empId}).then(res => {
              //更新货车及司机信息
              selTrucks(at)
              selEmps(ds)
            }).catch()
          }).catch()
        }else {
          updTruck({truckId:this.truckForm.truckId,truckState:"空闲",empId:0}).then(res =>{
            if(res != 1) {
              this.$message({
                showClose: true,
                message: '修改失败',
                type: 'error'
              });
              return false;
            }
            updEmp({truckId:0,empId:truckEmpId}).then(res => {
              //更新货车及司机信息
              selTrucks(at)
              selEmps(ds)
            }).catch()
          }).catch()
        }
      }
    },
    //查询
    selectTruck() {
      getTruck({truckType:this.selectForm.truckType,
        siteId:loginAccount.siteId,
        truckState:this.selectForm.truckState,
        nowSite:this.selectForm.nowSite}).then( res => {
        this.allTruck.splice(0)
        for(let truck of res) {
          if(truck.empId != null && truck.empId != 0) {
            truck.empName = truck.emps.empName
          }else{
            truck.empName = null
          }
          this.allTruck.push(truck)
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    //查询所有货车
    selTrucks(this.allTruck)
    //查询所有空闲司机
    selEmps(this.drivers)
  }  
}
</script>

<style scoped>
.height40{
  line-height:40px
}
.el-row{
  margin-bottom: 50px;
}
</style>

